<template>
  <div class="ng-table">
    <el-table
      :data="tableData"
      style="width: 100%;margin-top: 20px;"
      :header-cell-style="style()"
      border
      :highlight-current-row="rowHighlight"
      @selection-change="handleSelectionChange"
      @row-click="rowClick"
    >
      <el-table-column type="selection" width="55" v-if="type == 'selection'">
      </el-table-column>
      <el-table-column
        :label="item.label"
        v-for="(item, index) in columns"
        :key="index"
        style="text-align: center"
        :width="item.width ? item.width : false"
      >
        <template slot-scope="scope">
          <!-- 特殊化渲染/操作 可使用插槽 -->
          <div v-if="item.slot">
            <slot :row="scope.row" :name="item.slot"></slot>
          </div>
          
          <div v-else>
            {{ scope.row[item.value] }}
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next , total"
      :total="total"
      :current-page.sync="pageInfo.page"
      style="text-align: center; margin-top: 15px"
      :page-size="pageInfo.pageSize"
      @current-change="handleCurrentChangeUser"
      v-if="pagination"
    />
  </div>
</template>

<script>
export default {
  props: {
    //表格元数据
    tableData: {
      type: Array,
      default: () => []
    },
    //数据字段表头
    columns: {
      type: Array,
      default: () => []
    },
    //分页
    pageInfo: {
      type: Object,
      default: () => {}
    },
    //总条数
    total: {
      type: Number,
      default: () => 0
    },
    //复选框不需要不传，需要传selection
    type: {
      type: String,
      default: ""
    },
    //点击高亮行
    rowHighlight: {
      type: Boolean,
      default: false
    },
    //是否需要分页
    pagination: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 分页
    handleCurrentChangeUser(val) {
      this.$emit("handleCurrent", val);
    },
    // 复选框
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    //点击行
    rowClick(val) {
      this.$emit("rowClick", val);
    },
    //表头颜色
    style() {
      let styles = {
        background: "#f2f3f5",
        color: "#000"
      };
      return styles;
    }
  }
};
</script>

<style>
/* 居中显示 不需要可删除 */
.el-table .cell {
  text-align: center;
}
</style>
